body {
  margin: 0;
}

.font-size-big {
  font-size: 20px;
}

.font-size-small {
  font-size: 10px;
}

.font-weight-bold {
  font-weight: bold;
}

.flex-row-middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-column-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-row-space-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/*  */

.page-wrap {
  height: 100vh;
  width: 100vw;
  background-color: #e9e9e9;
}

.page-left {
  margin-left: 50px;
  margin-top: 150px;
}

.page-right {
  padding-left: 200px;
  flex-grow: 1;
  overflow-y: scroll;
}

.page-tone-item {
  width: 70px;
}

.step-box-wrap {
  position: relative;
}

.step-box-text {
  position: absolute;
  top: 50%;
  transform: translate(-110%, -50%);
}

.pin-step-wrap {
  position: relative;
}

.pin-step-mark {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
  left: 20px;
}
